<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大屏展示</title>
    <link rel="shortcut icon" href="./favicon.ico" />
    <link rel="stylesheet" href="dist/styles/iview.css">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        #total0,
        #total1,
        #total2,
        #total3,
        #total4 {
            width: 100%;
            height: 100%;
        }
        
        #echarts-map {
            position: absolute;
            left: 0;
            right: 320px;
            top: 0;
            bottom: 0;
            background: #072655;
        }
        
        #right-wrap {
            position: absolute;
            right: 0px;
            top: 0;
            bottom: 0;
            width: 320px;
            background: #072655;
        }
        
        #right-wrap>div {
            height: 50%;
            position: relative;
        }
        
        .ivu-card-head {
            background: #05144D;
            border-bottom: 1px solid #072655;
        }
        
        #right-wrap .card-title {
            color: #FFFFFF;
        }
        
        #right-wrap .ivu-select-item {
            color: #FFFFFF;
        }
        
        #right-wrap .ivu-select-item:hover {
            background: #53A4B7;
        }
        
        #right-wrap .ivu-card {
            border-radius: 0px;
        }
        
        #right-wrap .ivu-card-bordered {
            border-color: #05144D;
        }
        
        #charts {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }
        
        div.circle-custom h1 {
            font-size: 24px;
            font-weight: normal;
        }
        
        div.circle-custom p {
            font-size: 16px;
            margin: 10px 0 15px;
        }
        
        .center {
            position: relative;
        }
        
        .total0_num {
            position: absolute;
            left: 20%;
            top: 50%;
            margin-top: -25px;
            color: #b5004a;
            width: 61.7%;
            text-align: center;
        }
        
        .total0_num .p1 {
            font-size: 30px;
            line-height: 30px;
            height: 30px;
        }
        
        .total0_num .p2 {
            font-size: 20px;
            line-height: 20px;
            height: 20px;
        }
        
        .total1_num {
            position: absolute;
            left: 20%;
            top: 50%;
            margin-top: -23px;
            color: #b5004a;
            width: 61.7%;
            text-align: center;
        }
        
        .total1_num .p1 {
            font-size: 28px;
            line-height: 28px;
            height: 28px;
        }
        
        .total1_num .p2 {
            font-size: 16px;
            line-height: 18px;
            height: 18px;
        }
        
        [v-cloak] {
            display: none;
        }
        
        #nav-wrapper {
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: 999;
            color: #FFFFFF;
        }
    </style>
</head>

<body>
    <div id="container" ref="mapWraper">
        <div id="nav-wrapper">
            <i-button @click="clickChind" size="small" type="primary">中国</i-button>
            <i-button @click="clickprovince" v-if='provinceName!=""' size="small" type="info"><span v-text="provinceName"></span></i-button>
            <i-button v-if='cityName!=""' size="small" type="success"><span v-text="cityName"></span></i-button>
        </div>
        <div id="echarts-map">
            <div id="charts"></div>
        </div>
        <div id="right-wrap">
            <div>
                <Card style="width:100%;height: 100%;overflow: hidden;">
                    <p slot="title" class="card-title">
                        <Icon type="ios-flag"></Icon>
                        <span v-text="'选择区域'"></span>
                        <Icon @click.native="handleMapSizeChange" :type="isFullMap ?'md-contract':'md-expand'" size="23" style="float:right;cursor: pointer;"></Icon>
                    </p>
                    <div style="overflow-y: auto;position: absolute; left: 0;right: 0;bottom: 0;top: 51px;background: #05144D;" class="ul-wrapper">
                        <p class="ivu-select-item" v-for="item in area" @click="selectedProvinceName(item)" v-cloak>{{item.name}}</p>
                    </div>
                </Card>
            </div>
            <div>
                <div style="height: 40%;" class="center">
                    <div id="total0"></div>
                    <div class="total0_num">
                        <p class="p1" v-text="total"></p>
                        <p class="p2" v-text="'总数'"></p>
                    </div>
                </div>
                <div style="height: 60%;">
                    <div style="float: left;width: 50%;height: 50%;" class="center">
                        <div id="total1"></div>
                        <div class="total1_num">
                            <p class="p1" v-text="onlines"></p>
                            <p class="p2" v-text="'在线'"></p>
                        </div>
                    </div>
                    <div style="float: left;width: 50%;height: 50%;" class="center">
                        <div id="total2"></div>
                        <div class="total1_num">
                            <p class="p1" v-text="offlines"></p>
                            <p class="p2" v-text="'离线'"></p>
                        </div>
                    </div>
                    <div style="float: left;width: 50%;height: 50%;" class="center">
                        <div id="total3"></div>
                        <div class="total1_num">
                            <p class="p1" v-text="movings"></p>
                            <p class="p2" v-text="'行驶'"></p>
                        </div>
                    </div>
                    <div style="float: left;width: 50%;height: 50%;" class="center">
                        <div id="total4"></div>
                        <div class="total1_num">
                            <p class="p1" v-text="statics"></p>
                            <p class="p2" v-text="'静止'"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/gps51-jquery.js"></script>
    <script src="./js/js.cookie.min.js"></script>
    <script src="./js/config.js"></script>
    <script src="./js/dateformat.js"></script>
    <script src="./js/util.js"></script>
    <!-- <script src="./js/protobuf.js"></script>
    <script src="./js/respDeviceLastPositionProto.js"></script> -->
    <script>
        var token = utils.getParameterByName('token');
        var mapJson = null;
        var copyProvinceItem = null;
        var options = Object();
        options.showNum = 1;
        options.backgroundColor = "#072655";
        options.vsColor1 = '#50a3ba';
        options.vsColor2 = '#d94e5d';
        options.vsColor3 = '#eac736';
        options.fontColor = '#ffffff';
        options.itemFontColor = '#ffffff';
        options.itemAreaColor = '#50a3ba';
        options.itemBorderColor = '#1b4584';
        options.emItemFontColor = '#f50';
        options.emItemAreaColor = '#214884';
        options.toolBorderColor = '#49d9fe';
        options.toolBackgroundColor = '#214884';
        options.toolTextColor = '#ffffff';
        var vRoot = new Vue({
            el: "#container",
            data: {
                isFullMap: false,
                provinceName: '',
                cityName: '',
                area: [],
                strokeWidth: 7,
                offlines: 0, //离线的车
                onlines: 0, //在线的车
                movings: 0, //运动 在跑的车
                statics: 0, //静止
                total: 0, //总数
            },
            mounted: function() {
                this.init();
                // // PositionLastProto.proto
                // var data = {
                //     username: 'admin',
                //     deviceids: [],
                //     lastquerypositiontime: 0
                // };


                // var xhr = null;
                // try {
                //     xhr = new XMLHttpRequest();
                // } catch (e) {
                //     xhr = new ActiveXObject("Microsoft.XMLHTTP");
                // }
                // //2.调用open方法（true----异步）
                // xhr.open("post", myUrls.lastPosition(), true);
                // xhr.responseType = "arraybuffer";
                // //3.发送数据
                // //xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                // xhr.send(JSON.stringify(data));

                // //4.请求状态改变事件
                // xhr.onreadystatechange = function() {
                //     if (xhr.readyState == 4) {
                //         if (xhr.status == 200) {

                //             var responseArray = new Uint8Array(this.response)
                //                 //var hexStr = utils.Bytes2HexStr(responseArray);
                //                 //console.log(this.response, hexStr);

                //             //console.log(responseArray);
                //             var root = protobuf.Root.fromJSON(deviceLastPositionProto);
                //             var respDeviceLastPositionProto = root.lookupType("proto.RespDeviceLastPositionProto");

                //             var decoded = respDeviceLastPositionProto.decode(responseArray);
                //             console.log('decoded --- ', decoded);
                //         } else {
                //             alert("错误" + xhr.status)
                //         }
                //     }
                // }
            },
            methods: {
                clickChind: function() {
                    if (this.provinceName == '' && this.cityName == '') return;
                    this.selectedProvinceName(this.area[0]);
                },
                clickprovince: function() {
                    if (copyProvinceItem == null) return;
                    this.selectedProvinceName(copyProvinceItem);
                },
                handleMapSizeChange: function() {
                    var mapWraper = this.$refs.mapWraper;
                    if (this.isFullMap) {
                        if (document.exitFullscreen) {
                            document.exitFullscreen()
                        } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen()
                        } else if (document.webkitCancelFullScreen) {
                            document.webkitCancelFullScreen()
                        } else if (document.msExitFullscreen) {
                            document.msExitFullscreen()
                        }
                        this.isFullMap = false;
                    } else {
                        if (mapWraper.requestFullscreen) {
                            mapWraper.requestFullscreen()
                        } else if (mapWraper.mozRequestFullScreen) {
                            mapWraper.mozRequestFullScreen()
                        } else if (mapWraper.webkitRequestFullScreen) {
                            mapWraper.webkitRequestFullScreen()
                        } else if (mapWraper.msRequestFullscreen) {
                            mapWraper.msRequestFullscreen()
                        }
                        this.isFullMap = true;
                    }
                },
                init: function() {
                    var that = this;
                    that.data = []; //地图数据
                    that.myChart = echarts.init(document.getElementById('charts'));
                    that.chart_total0 = echarts.init(document.getElementById('total0'));
                    that.chart_total1 = echarts.init(document.getElementById('total1'));
                    that.chart_total2 = echarts.init(document.getElementById('total2'));
                    that.chart_total3 = echarts.init(document.getElementById('total3'));
                    that.chart_total4 = echarts.init(document.getElementById('total4'));
                    window.onresize = function() {
                        that.myChart.resize();
                        that.chart_total0.resize();
                        that.chart_total1.resize();
                        that.chart_total2.resize();
                        that.chart_total3.resize();
                        that.chart_total4.resize();
                    }
                    $.ajax({
                        url: myUrls.queryGeoJson(100000, 1),
                        type: 'get',
                        success: function(json) {
                            mapJson = json;

                            echarts.registerMap('map', mapJson);
                            that.displayEcharts();
                            that.clickChinaMap();

                            var area = [{
                                adcode: 100000,
                                name: '中国'
                            }];

                            mapJson.features.forEach(function(item) {
                                var properties = item.properties;
                                area.push({
                                    adcode: properties.adcode,
                                    name: properties.name
                                });
                            });

                            that.area = area;
                            that.qeuryDatavOnlineSummary(100000);
                        }
                    });

                    document.addEventListener('fullscreenchange', function() {
                        that.changeIsFullMapIcon();
                    })
                    document.addEventListener('mozfullscreenchange', function() {
                        var isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
                        isFullscreen = !!isFullscreen;
                        that.isFullMap = isFullscreen;
                    })
                    document.addEventListener('webkitfullscreenchange', function() {
                        var isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
                        isFullscreen = !!isFullscreen;
                        that.isFullMap = isFullscreen;
                    })
                },
                changeIsFullMapIcon: function() {
                    var isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
                    isFullscreen = !!isFullscreen;
                    this.isFullMap = isFullscreen;
                },
                clickChinaMap: function() {
                    var that = this;
                    that.myChart.on('click', function(params) {
                        var data = params.data;
                        that.getProvinceJson(data, function(json) {
                            if (data.level == 'province') {
                                copyProvinceItem = {
                                    adcode: data.adcode,
                                    name: data.name
                                }
                                that.provinceName = data.name;
                                that.cityName = '';
                            } else if (data.level == 'city') {
                                that.cityName = data.name;
                            }
                        });
                    });
                },
                selectedProvinceName: function(item) {
                    var that = this;

                    that.getProvinceJson(item, function(json) {
                        if (item.adcode == 100000) {
                            that.provinceName = "";
                        } else {
                            that.provinceName = item.name;
                            copyProvinceItem = item;
                        }
                        that.cityName = "";
                    });
                },
                getProvinceJson: function(province, callback) {
                    if (province && province.adcode) {
                        var that = this;
                        $.ajax({
                            url: myUrls.queryGeoJson(province.adcode, 1),
                            async: false,
                            success: function(json) {
                                mapJson = json;
                                that.qeuryDatavOnlineSummary(province.adcode);
                                callback && callback(json);
                            }
                        });
                    }
                },
                displayEcharts: function() {
                    var options = this.getEchartsOptions();
                    this.myChart.setOption(options);
                },
                changeData: function() {
                    echarts.registerMap('map', mapJson);
                    this.myChart.setOption({
                        series: [{
                            mapType: 'map',
                            data: this.data,
                        }],
                    });
                },
                qeuryDatavOnlineSummary: function(adcode) {
                    var url = myUrls.datavOnlineSummary(),
                        that = this;
                    utils.sendAjax(url, {
                        adcode: adcode
                    }, function(resp) {
                        if (resp.status === 0) {
                            that.offlines = resp.offlines;
                            that.onlines = resp.onlines;
                            that.movings = resp.movings;
                            that.statics = resp.statics;
                            that.total = resp.total;
                            that.data = resp.summarys;
                            that.changeData();
                            that.showTotal();
                        } else {
                            that.$Message.error('查询错误');
                        }

                    }, function(error) {
                        that.$Message.error('网络错误');
                    });
                },
                showTotal: function() {
                    this.chart_total0.setOption({
                        series: [{
                            name: '总数',
                            type: 'pie',
                            radius: ['77%', '90%'],
                            avoidLabelOverlap: false,
                            hoverOffset: 5,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: false
                                }

                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [{
                                value: this.total,
                                name: '总数',
                                itemStyle: {
                                    normal: {
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 1,
                                            colorStops: [{
                                                offset: 0,
                                                color: 'red' // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: 'blue' // 100% 处的颜色
                                            }],
                                            global: false // 缺省为 false
                                        }
                                    }
                                },
                            }, ]
                        }]
                    });
                    this.chart_total1.setOption({
                        series: [{
                            name: '在线',
                            type: 'pie',
                            radius: ['77%', '90%'],
                            avoidLabelOverlap: false,
                            hoverOffset: 5,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: false
                                }

                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [{
                                value: this.onlines,
                                name: '在线',
                                itemStyle: {
                                    normal: {
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 1,
                                            colorStops: [{
                                                offset: 0,
                                                color: '#08d511' // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: '#fff600' // 100% 处的颜色
                                            }],
                                            global: false // 缺省为 false
                                        }
                                    }
                                },
                            }, {
                                value: (this.total - this.onlines),
                                name: '其他',
                                itemStyle: {
                                    normal: {
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 1,
                                            colorStops: [{
                                                offset: 0,
                                                color: '#00001d' // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: '#00001d' // 100% 处的颜色
                                            }],
                                            global: false // 缺省为 false
                                        }
                                    }
                                },
                            }, ]
                        }]
                    });
                    this.chart_total2.setOption({
                        series: [{
                            name: '离线',
                            type: 'pie',
                            radius: ['77%', '90%'],
                            avoidLabelOverlap: false,
                            hoverOffset: 5,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: false
                                }

                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [{
                                value: this.offlines,
                                name: '离线',
                                itemStyle: {
                                    normal: {
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 1,
                                            colorStops: [{
                                                offset: 0,
                                                color: '#8b95ba' // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: '#8baaba' // 100% 处的颜色
                                            }],
                                            global: false // 缺省为 false
                                        }
                                    }
                                },
                            }, {
                                value: (this.total - this.offlines),
                                name: '其他',
                                itemStyle: {
                                    normal: {
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 1,
                                            colorStops: [{
                                                offset: 0,
                                                color: '#00001d' // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: '#00001d' // 100% 处的颜色
                                            }],
                                            global: false // 缺省为 false
                                        }
                                    }
                                },
                            }, ]
                        }]
                    });
                    this.chart_total3.setOption({
                        series: [{
                            name: '行驶',
                            type: 'pie',
                            radius: ['77%', '90%'],
                            avoidLabelOverlap: false,
                            hoverOffset: 5,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: false
                                }

                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [{
                                value: this.movings,
                                name: '行驶',
                                itemStyle: {
                                    normal: {
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 1,
                                            colorStops: [{
                                                offset: 0,
                                                color: '#678eff' // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: '#67e1ff' // 100% 处的颜色
                                            }],
                                            global: false // 缺省为 false
                                        }
                                    }
                                },
                            }, {
                                value: (this.total - this.movings),
                                name: '其他',
                                itemStyle: {
                                    normal: {
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 1,
                                            colorStops: [{
                                                offset: 0,
                                                color: '#00001d' // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: '#00001d' // 100% 处的颜色
                                            }],
                                            global: false // 缺省为 false
                                        }
                                    }
                                },
                            }, ]
                        }]
                    });
                    this.chart_total4.setOption({
                        series: [{
                            name: '停止',
                            type: 'pie',
                            radius: ['77%', '90%'],
                            avoidLabelOverlap: false,
                            hoverOffset: 5,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: false
                                }

                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [{
                                value: this.statics,
                                name: '静止',
                                itemStyle: {
                                    normal: {
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 1,
                                            colorStops: [{
                                                offset: 0,
                                                color: '#ff5858' // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: '#ffca58' // 100% 处的颜色
                                            }],
                                            global: false // 缺省为 false
                                        }
                                    }
                                },
                            }, {
                                value: (this.total - this.statics),
                                name: '其他',
                                itemStyle: {
                                    normal: {
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 1,
                                            colorStops: [{
                                                offset: 0,
                                                color: '#00001d' // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: '#00001d' // 100% 处的颜色
                                            }],
                                            global: false // 缺省为 false
                                        }
                                    }
                                },
                            }, ]
                        }]
                    });
                },
                getEchartsOptions: function() {
                    return {
                        tooltip: {
                            trigger: 'item'
                        },
                        visualMap: {
                            min: 0,
                            max: 100,
                            left: '10',
                            bottom: '10',
                            text: ['多', '少'], // 文本，默认为数值文本
                            inRange: {
                                color: [options.vsColor1, options.vsColor3, options.vsColor2],
                                symbolSize: [30, 30]
                            },
                            textStyle: {
                                color: '#fff',
                            },
                            calculable: true
                        },
                        series: [{
                            name: '',
                            type: 'map',
                            mapType: 'map',
                            // data: [{
                            //     name: "广东省",
                            //     value: [0, 1, 0, 0, 1000]
                            // }, {
                            //     name: "山东省",
                            //     value: [0, 1, 0, 0, 9]
                            // }],
                            data: this.data,
                            zoom: 1.2,
                            label: {
                                normal: {
                                    formatter: function(a) {
                                        if (typeof a.data !== "undefined" && typeof a.data.value !== "undefined") {
                                            if (options.showNum == 1) {
                                                return a.name + '\n(' + a.data.value[4] + ')';
                                            } else {
                                                return a.name;
                                            }
                                        }
                                    },
                                    color: '#fff',
                                    position: 'right',
                                    show: true
                                },
                                emphasis: {
                                    color: '#fff',
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: options.itemFontColor, //文字颜色
                                    areaColor: options.itemAreaColor, //省背景色
                                    borderColor: options.itemBorderColor,
                                },
                                emphasis: {
                                    color: options.emItemFontColor, //文字颜色
                                    //borderColor: 'red',
                                    areaColor: options.emItemAreaColor,
                                }
                            },
                            tooltip: {
                                borderColor: options.toolBorderColor,
                                backgroundColor: options.toolBackgroundColor,
                                borderWidth: '2',
                                padding: [15, 30, 15, 15],
                                formatter: function(a) {
                                    //console.log(typeof a.data.value);
                                    if (typeof a.data !== "undefined" && typeof a.data.value !== "undefined") {
                                        return a.name + '<br>' +
                                            '总数：' + a.data.value[4] + '<br>' +
                                            '在线：' + a.data.value[0] + '<br>' +
                                            '离线：' + a.data.value[1] + '<br>' +
                                            '运行：' + a.data.value[2] + '<br>' +
                                            '静止：' + a.data.value[3] + '';
                                    }
                                },
                                textStyle: {
                                    color: options.toolTextColor,
                                    fontSize: '14'
                                },
                                extraCssText: ''
                            },
                        }]
                    }
                }
            },
        })
    </script>
</body>

</html>